<template>
    <h1>vue3一个人的信息</h1>
    <h1>姓名：{{name}}</h1>
    <h1>年龄：{{age}}</h1>
    <br>
    <h1>vue2一个人的信息</h1>
    <h1>姓名：{{name}}</h1>
    <button @click="sayWelcome">说话Vue2</button>
    <button @click="test1">在vue2中读取vue3的配置数据</button>
    <button @click="test2">在vue3中读取vue2的配置数据</button>
</template>
<script>
export default {
  /**
   * 初识vue3
   * vue3和vue2混用
   * vue3能访问vue2的属性和方法
   * vue2不能访问vue3的属性和方法
   * 如果属性冲突以vue3为主
   */
name: 'helloWordA',
  // // 测试 ，暂时不考虑响应式
  setup(){
    let name = '张三'
    let age = 188

    function sayHello(){
      alert(`我叫${name} 我${age}岁了`)
    }
    function test2(){
      //在vue3中读不到vue2的方法
      console.log(this.name)
      console.log(this.sex)
    }
    return{
      name,
      age,
      sayHello,
      test2
    }
  },
  //vue2
  data(){
    return {
      sex:`男`
    }
  },
  methods: {
    sayWelcome() {
      alert(`欢迎来到尚硅谷`)
    },
    test1() {
      console.log(this.name)
    }
  }
}
</script>
<style scoped>
a {
  color: #42b983;
}

label {
  margin: 0 0.5em;
  font-weight: bold;
}

code {
  background-color: #eee;
  padding: 2px 4px;
  border-radius: 4px;
  color: #304455;
}
</style>
